<template>
	<view class="goodsDetails" v-if="goods_detail.goods_id">
		<view class="swiperBox">
			<u-swiper v-if="typeCurrent == 0" :list="goods_detail.goods_img_list" mode="number"
				indicator-pos="bottomRight" height="750" border-radius="0"></u-swiper>

			<view class="swiper-video" v-if="typeCurrent == 1 && goods_detail.goods_video_url">
				<video id="carouseVideo" :src="goods_detail.goods_video_url" play-btn-position="center"
					:custom-cache="false" :autoplay="true"></video>
			</view>

			<view class="typeBtn" v-if="goods_detail.goods_video_url">
				<view class="imgBtn item" :class="typeCurrent == 0 ? 'active' : ''" @click="typeTap(0)">
					<text>图片</text>
				</view>
				<view class="videoBtn item" :class="typeCurrent == 1 ? 'active' : ''" @click="typeTap(1)">
					<text>视频</text>
				</view>
			</view>
		</view>

		<view class="commodityInfo">
			<view class="topBox flexEnd">
				<view class="info">
					<view class="priceBox flex_end">
						<view class="price">￥<text>{{goods_detail.sales_price}}</text></view>
						<view class="label">抢购中</view>
						<view class="stock">库存：952</view>
					</view>
					<view>
						<view class="group">三人成团</view>
						<view class="num mTop1">0人已参与</view>
					</view>
				</view>
			</view>
			<view class="bottoBox flex_space_b">
				<view class="title">{{goods_detail.goods_title}}</view>
			</view>
		</view>

		<!-- #ifdef APP-PLUS || H5 -->
		<view class="rule mTop1">
			<image class="circuit" :src="goods_detail.goods_sales_rule" mode="widthFix"
				v-if="goods_detail.goods_sales_rule"></image>
		</view>
		<!-- #endif -->
		
		<view class="barBox flex_space_a mTop1">
			<view class="item">
				<text class="custom-icon custom-icon-zhengpin"></text>
				<text class="text">正品保证</text>
			</view>
			<view class="item">
				<text class="custom-icon custom-icon-tuihuotuikuan"></text>
				<text class="text">概不退货</text>
			</view>
		</view>
		
		<view class="warnBox mTop1">
			<view class="text">三个人成团，只有一人能得到商品</view>
			<view class="text">另外两个人全额退款，立赚￥0.33</view>
		</view>

		<!-- <view class="group mTop1" v-if="goods_detail.is_score_goods == '10'">
			<view class="titleBox flex_conter_c">
				<view class="title">正在拼团</view>
			</view>
			<view class="groupList">
				<view class="box">
					<u-avatar class="avatar" v-for="(item, index) in goods_detail.current_order_user_list"
						:key="item.user_nickname" @click="avatarEvent(item)" :src="item.user_headimg" size="64"
						mode="circle"></u-avatar>
					<view class="noGroup" v-for="(item, index) in noGroupList" :key="index">
						<u-icon name="question"></u-icon>
					</view>
				</view>

				<view class="text">当前差<text class="redText">{{noGroupList.length}}</text>人成团</view>
			</view>
		</view> -->

		<view class="introduction mTop1">
			<view class="item flex_space_b" v-if="goods_detail.dst_area">
				<view class="title">配送说明</view>
				<view class="content">{{goods_detail.dst_area}}</view>
			</view>
			<view v-if="goods_detail.is_score_goods == '10'" class="item flex_space_b"
				@click="goUrl('/pages/index/shopRule')">
				<view class="title">新手攻略</view>
				<!-- <view class="content">参团后邀请好友-人满拼中发货（不满退款）</view> -->
				<view class="rightIcon">
					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
				</view>
			</view>
		</view>

		<view class="details mTop1">
			<view class="titleBox flex_conter_c">
				<view class="title">商品详情</view>
			</view>
			<u-parse :html="goods_detail.goods_detail"></u-parse>
			<!-- <rich-text :nodes="html"></rich-text> -->
		</view>

		<u-popup v-model="avatarShow" mode="center" :closeable="true" border-radius="8" width="600">
			<view class="avatarPopup">
				<u-avatar :src="avatar_user_headimg" mode="square" size="240"></u-avatar>
				<view class="uName">{{ avatar_user_nickname }}</view>
			</view>
		</u-popup>

		<view class="notice mTop1">
			<image class="noticeImg" mode="widthFix" :src="goods_detail.goods_sales_info"></image>
		</view>
		
		<view class="shareFixed flex_conter_c">
			<button class="item share" hover-class="none" open-type="share"
				v-if="use_scene == 'mp-weixin' && goods_detail.is_score_goods == '20'">
				<u-icon name="share" size="34" color="#666"></u-icon>
				<view class="text">分享</view>
			</button>
			<view class="item share" @click="invitationEvent(true)"
				v-if="use_scene == 'mp-weixin' && goods_detail.is_score_goods == '10'">
				<u-icon name="share" size="34" color="#666"></u-icon>
				<view class="text">分享</view>
			</view>
		</view>

		<view class="bottomBox flex_space_b">
			<view class="operate flex_space_a">
				<view class="item sixin" hover-class="btnHover" @click="goHome">
					<u-icon name="shouye" custom-prefix="custom-icon" size="32" color="#666"></u-icon>
					<view class="text">首页</view>
				</view>
				<button class="item server" hover-class="btnHover" open-type="contact">
					<u-icon name="server-fill" size="34" color="#666"></u-icon>
					<view class="text">客服 </view>
				</button>
				<view class="item collect" hover-class="btnHover">
					<u-icon name="star-fill" size="34" color="#22ac38" v-if="false"></u-icon>
					<u-icon name="star" size="34" color="#666" v-else></u-icon>
					<view class="text">收藏</view>
				</view>
			</view>
			<view class="btnBox flex_conter_c" v-if="goods_detail.is_score_goods == '10'">
				<button type="primary" class="btn" hover-class="none" @click="purchaseEvent">直接购买</button>
				<!-- <button type="primary" class="btn" hover-class="none" @click="rapidDough">一键成团</button> -->
				<button type="primary" class="btn" hover-class="none" @click="groupEvent">马上成团</button>
			</view>
			<view class="btnBox" v-else>
				<button type="primary" class="btn2" hover-class="none" @click="purchaseEvent">立即购买</button>
			</view>
		</view>

		<u-popup v-model="goodsShow" mode="bottom" :closeable="true">
			<view class="popupBox">
				<view class="topBox flex_conter">
					<image class="comImg" mode="aspectFill" :src="goods_detail.goods_main_img"></image>
					<view class="info">
						<view class="title line-2">{{goods_detail.goods_title}}</view>
						<view class="price">¥{{goods_detail.sales_price}}</view>
					</view>
				</view>
				<view class="format " v-for="(item,index) in goods_detail.goods_spec_list" :key="index">
					<view class="title">{{item.name}}</view>
					<view class="itemList">
						<view class="item" :class="item.val == itm ? 'itemActive' : ''"
							v-for="(itm, idx) in item.val_array" :key="idx" @click="chooseSpec(index,idx)">{{itm}}
						</view>
					</view>
				</view>

				<button type="primary" class="buyBtn mTop2" hover-class="none"
					@click="goTreasureOrder">{{ goodsBtnText }}</button>
			</view>
		</u-popup>

		<view class="popum" v-for="(item, index) in popumList" :key="index" v-if="popumList.length">
			<image :src="item.popum_img" mode=""></image>
			<view class="uName flex_conter_c">
				<view class="text u-line-1">{{item.popum_nickname}}</view>已参团
			</view>
		</view>

		<view class="winningMask" :class="winningShow == true ? 'winningShow' : ''" @click="winningShow = false"
			@touchmove.stop>
			<view class="winning" @tap.stop>
				<image class="winningImage" mode="widthFix" src="/static/winning.png"></image>

				<view class="con mTop3">
					<view class="label">拼中者</view>
					<view class="winningName redText mTop4">
						<view class="avatarBox">
							<image class="crown" src="/static/crown.png" mode="aspectFill"></image>
							<image class="avatar" :src="selected_user_headimg" mode="aspectFill"></image>
						</view>
						<view>{{selected_user_nickname}}</view>
					</view>

					<view class="label mTop3">未拼中名单</view>
					<view class="failureList mTop1">
						<view class="item flex_conter_c" v-for="(itm,idx) in tuan_order_list.slice(0, 5)" :key="idx"
							v-if="idx > 0">
							<image class="avatar" :src="itm.user_headimg" mode="aspectFill"></image>
							<view class="uName">{{itm.user_nickname}}</view>
						</view>
						<view class="remaining flex_conter_c" v-if="tuan_order_list.length >= 5">
							<u-icon name="more-dot-fill"></u-icon>
						</view>
					</view>
				</view>
				<!-- <button class="btn mTop3" type="default">确认</button> -->

				<view class="iconBox" @click="winningShow = false">
					<text class="custom-icon custom-icon-chahao"></text>
				</view>
			</view>
		</view>

		<view class="winningMask_hongbao winningShow_hongbao" v-if="is_user_hongbao>0">
			<view class="winning_hongbao">
				<image class="winningImage_hongbao" mode="widthFix" src="/static/winning.png"></image>
				<view class="con mTop3">
					<view class="winningName redText mTop4">
						<view>{{user_hongbao_text}}</view>
					</view>
				</view>
				<button class="btn mTop3" type="default" @click="go_hongbao">去分享</button>
				<view class="iconBox">
					<text class="custom-icon custom-icon-chahao" @click="is_user_hongbao=0"></text>
				</view>
			</view>
		</view>

		<u-popup v-model="shareShow" mode="bottom" :closeable="true" :safe-area-inset-bottom="true">
			<view class="shareBox">
				<view class="title">分享</view>
				<view class="shareList flex_conter">
					<button class="item" open-type="share">
						<view class="iconBox flex_conter_c">
							<u-icon name="weixin-fill" color="#fff" size="36"></u-icon>
						</view>
						<view class="text">分享给好友</view>
					</button>
					<view class="item" @click="pyqEvent">
						<view class="iconBox flex_conter_c">
							<u-icon name="moments" color="#fff" size="36"></u-icon>
						</view>
						<view class="text">朋友圈</view>
					</view>
					<view class="item" @click="shareImageEvent">
						<view class="iconBox flex_conter_c">
							<u-icon name="photo" color="#fff" size="36"></u-icon>
						</view>
						<view class="text">生成分享海报</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-mask :show="pyqShow" :zoom="false" @click="pyqShow = false">
			<view class="pyqBox">
				<image src="@/static/shareMask.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<u-popup v-model="shareImageShow" mode="bottom" :closeable="true" :safe-area-inset-bottom="true">
			<view class="shareBox">
				<view class="title">图片到相册</view>
				<view class="shareImage">
					<image :src="shareBanner" mode="heightFix"></image>

					<button type="default" hover-class="none" @click="downloadImage">保存图片</button>

					<view class="text">保存图片到手机相册后，将图片分享到您的圈子</view>
				</view>
			</view>
		</u-popup>

		<canvas canvas-id="shareFriends" id="shareFriends" style="width: 500px;height: 398px;" />
		<canvas canvas-id="shareImageCanvas" id="shareImageCanvas" style="width: 1080px;height: 1842px;" />
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				typeCurrent: 0,
				goods_id: 0,
				goods_detail: {},
				goodsShow: false,
				goodsBtnText: '组队拼团',
				// 10 任性直购  20 拼团
				order_type: 10,
				choose_spec_list: [],
				uid: 0,
				noGroupList: [],
				popum: false,
				popum_img: "",
				popum_nickname: "",
				popumList: [],
				cache: [],
				winningShow: false,
				flag: false,
				order_cycle: 0,
				timer: 0,
				selected_user_headimg: '',
				selected_user_nickname: '',
				tuan_order_list: [],
				avatarShow: false,
				avatar_user_headimg: '',
				avatar_user_nickname: '',
				shareShow: false,
				shareImageShow: false,
				pyqShow: false,
				shareFriendsImage: '',
				shareBanner: '',
				use_scene: util.getCurrentSecene(),
				current_user_headimg: '',
				current_user_nick_name: '',
				minpro_qcode: '',
				is_user_hongbao: 0,
				user_hongbao_text: ''
			}
		},
		onLoad(options) {
			this.goods_id = options.goods_id;
			if (!this.goods_id) {
				this.goods_id = uni.getStorageSync("xixuan_pintuan_goods_id");
			}
			this.loadData(true);
		},
		onShareAppMessage() {
			this.shareShow = false

			return {
				title: this.goods_detail.goods_title,
				imageUrl: this.shareFriendsImage,
				path: '/pages/index/goodsDetails?uuid=' + this.uid + '&goods_id=' + this.goods_id
			}
		},
		onShareTimeline() {
			return {
				title: this.goods_detail.goods_title,
				imageUrl: this.shareFriendsImage,
				query: 'uuid=' + this.uid + '&goods_id=' + this.goods_id
			}
		},
		onShow() {
			this.timer = setInterval(this.flushData, 5000);
			this.checkIsUserHongbao();
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			checkIsUserHongbao: function() {
				var that = this;
				util.requestPost("api.php/Hongbao/checkUserHongbao", {}, function(res) {
					that.is_user_hongbao = res.data.is_user_hongbao;
					that.user_hongbao_text = res.data.user_hongbao_text;
				}, false);
			},
			go_hongbao() {
				//红包
				uni.navigateTo({
					url: '/pagesB/my/shareRedEnvelope?id=' + this.is_user_hongbao
				})
			},
			typeTap(index) {
				this.typeCurrent = index
			},
			avatarEvent(item) {
				this.avatar_user_headimg = item.user_headimg
				this.avatar_user_nickname = item.user_nickname
				this.avatarShow = true
			},
			loadData: function(is_loading) {
				// 加载数据
				var that = this;
				let data = {
					goods_id: that.goods_id
				};
				util.requestPost("api.php/home/goodsData", data, function(res) {
						let goods_spec_list = res.data.goods_detail.goods_spec_list;
						let index = 0;
						goods_spec_list.forEach(event => {
							event.val = goods_spec_list[index]['val_array'][0];
							index++;
						});

						res.data.goods_detail.goods_spec_list = goods_spec_list;

						let groupNumber = res.data.goods_detail.sub_team_count;
						let userNumber = res.data.goods_detail.current_order_user_list.length;

						that.goods_detail = res.data.goods_detail;

						that.uid = res.data.uid;
						that.order_cycle = res.data.order_cycle;

						let number = groupNumber - userNumber;
						that.noGroupList = that.getLoopArray(0, number - 1);

						that.current_user_headimg = res.data.user_headimg;
						that.current_user_nick_name = res.data.user_nickname;

						// #ifdef APP-PLUS || H5
						if (!that.goods_detail.goods_sales_rule) {
							that.goods_detail.goods_sales_rule =
								"http://xcx.tfxiaochengxu.com/2020-11-19_5fb62674756a3.png";
						}
						// #endif

						// #ifdef MP-WEIXIN
						if (that.goods_detail.is_score_goods == '10') {
							that.invitationEvent(false);
						}
						// #endif
					},
					is_loading);
			},
			chooseSpec(index, idx) {
				// 选择类型
				let goods_detail = this.goods_detail;
				let goods_spec_list = this.goods_detail.goods_spec_list;
				goods_spec_list[index].val = goods_spec_list[index]['val_array'][idx];
				goods_detail.goods_spec_list = goods_spec_list;
				this.goods_detail = goods_detail;
			},
			// 获取数组
			getLoopArray(start, end) {
				let array = [];
				for (let i = start; i <= end; i++) {
					array.push(i);
				}
				return array;
			},
			verifySpec() {
				// 校验商品属性选择
				let flag = true;
				let flag_msg = "";
				let choose_spec_list = [];
				this.goods_detail.goods_spec_list.forEach(event => {
					if (!event.val) {
						if (!flag_msg) {
							flag_msg = "请选择商品属性：" + event.name;
						}
						flag = false;
					} else {
						choose_spec_list.push({
							name: event.name,
							val: event.val
						});
					}
				});
				if (!flag) {
					util.toast(flag_msg);
				}
				this.choose_spec_list = choose_spec_list;
				return flag;
			},
			goTreasureOrder() {
				if (this.verifySpec()) {
					this.goodsShow = false;
					// 跳转下单
					uni.navigateTo({
						url: "/pages/index/treasureOrder?order_type=" + this.order_type + "&choose_spec_json=" +
							JSON.stringify(this.choose_spec_list) + "&goods_id=" + this.goods_detail.goods_id +
							"&goods_main_img=" + this.goods_detail.goods_main_img + "&goods_title=" + this
							.goods_detail.goods_title + "&sales_price=" + this.goods_detail.sales_price
					});
				}
			},
			purchaseEvent() {
				let that = this;
				uni.showModal({
					title: '友情提示',
					content: '确认直接购买吗？',
					success(res) {
						if (res.confirm) {
							// 直接购买
							if (util.is_wechat_xcx_auth()) {
								that.order_type = '10';
								that.goodsBtnText = '任性直购';
								that.goodsShow = true;
								if (that.goods_detail.goods_spec_list.length == 1 && that.goods_detail
									.goods_spec_list[0]['val_array'].length == 1) {
									that.goTreasureOrder();
								}
							}
						}
					}
				})

			},
			rapidDough() {
				let that = this;
				// 一键成团
				if (util.is_wechat_xcx_auth()) {
					that.order_type = '30';
					that.goodsBtnText = '一键成团';
					that.goodsShow = true;
					if (that.goods_detail.goods_spec_list.length == 1 && that.goods_detail.goods_spec_list[0]['val_array']
						.length == 1) {
						that.goTreasureOrder();
					}
				}

			},
			groupEvent() {
				// 拼团
				if (util.is_wechat_xcx_auth()) {
					this.order_type = '20';
					this.goodsBtnText = '组队拼团';
					this.goodsShow = true;
					if (this.goods_detail.goods_spec_list.length == 1 && this.goods_detail.goods_spec_list[0]['val_array']
						.length == 1) {
						this.goTreasureOrder();
					}
				}
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			flushData() {
				var that = this;
				let data = {
					goods_id: that.goods_id,
					order_cycle: that.order_cycle
				};
				util.requestPost("api.php/home/flushGoodsOrderData", data, function(res) {
						let groupNumber = that.goods_detail.sub_team_count;
						let current_order_user_list = res.data.current_order_user_list;
						let userNumber = current_order_user_list.length;
						let tmp_current_order_list = that.goods_detail.current_order_user_list;
						that.goods_detail.current_order_user_list = current_order_user_list;

						let flag = false;
						let index = 1;
						current_order_user_list.forEach(event => {
							if (index > tmp_current_order_list.length) {
								that.addPopumList(event.user_headimg, event.user_nickname);
								flag = true;
							}
							index++;
						});

						if (flag) {
							that.showSwiper();
						}

						let number = groupNumber - userNumber;
						that.noGroupList = that.getLoopArray(0, number - 1);

						let last_tuan_order_user_list = res.data.last_tuan_order_user_list;
						if (last_tuan_order_user_list.length > 0) {
							that.selected_user_headimg = last_tuan_order_user_list[0].user_headimg;
							that.selected_user_nickname = last_tuan_order_user_list[0].user_nickname;
							that.tuan_order_list = last_tuan_order_user_list;
							that.order_cycle = res.data.order_cycle;
							that.goods_detail.sales_num = parseInt(that.goods_detail.sales_num) + 1;
							that.winningShow = true;
						}
					},
					false);
			},
			showSwiper() {
				if (this.cache.length == 0) {
					return false;
				}
				// 防止在清空popumList数组时，又添加了数据
				if (this.flag && this.popumList.length !== 0) {
					this.popumList = []
					setTimeout(() => {
						this.flag = false
						this.showSwiper()
					}, 1500);
				} else if (this.cache.length >= 1) {
					// 参团人员数据修改
					this.popumList.push(this.cache[0]);
					this.cache.shift();
					setTimeout(() => {
						this.flag = false
						this.showSwiper()
					}, 2500);
				} else {
					setTimeout(() => {
						this.flag = true
						this.showSwiper()
					}, 1500);
				}
			},
			addPopumList(img, nickname) {
				this.cache.push({
					popum_img: img,
					popum_nickname: nickname,
				})
			},
			goUrl(url) {
				uni.navigateTo({
					url
				})
			},

			async invitationEvent(flag) {
				let that = this;
				if (!this.shareFriendsImage) {
					const ctx = uni.createCanvasContext('shareFriends')

					ctx.drawImage('../../static/shareFriends.png', 0, 0, 500, 398)

					let goodsImage = await this.getImageInfo(this.goods_detail.goods_main_img);

					ctx.drawImage(goodsImage, 18, 127, 252, 252);

					ctx.setFontSize(42);
					ctx.setFillStyle('#f12d0a')
					ctx.fillText('￥' + that.goods_detail.sales_price, 295, 210)

					ctx.setFontSize(20);
					ctx.setFillStyle('#f12d0a')
					ctx.fillText('￥' + that.goods_detail.max_income, 350, 270)
					/* 绘制海报 */
					ctx.draw(false, () => {
						uni.canvasToTempFilePath({
							canvasId: 'shareFriends',
							x: 0,
							y: 0,
							width: 500,
							height: 398,
							destWidth: 500,
							destHeight: 398,
							success: (res) => {
								this.shareFriendsImage = res.tempFilePath
							}
						})
					})
				}

				this.shareShow = flag
			},
			pyqEvent() {
				this.shareShow = false
				this.pyqShow = true
			},
			getImageInfo(url) {
				if (url.indexOf("https") != 0) {
					url = "https" + url.substr(4);
				}
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: function(image) {
							resolve(image.path)
						}
					});
				})
			},
			// 获取微信分享二维码
			async getMinproShareImg() {
				// 加载数据
				var that = this;
				let data = {
					'goods_id': that.goods_detail.goods_id,
					'uuid': that.uid,
					'page_path': 'pages/index/goodsDetails',
					'scene': `goods_id:${that.goods_detail.goods_id},uuid:${that.uid}`
				};
				await util.requestPost("api.php/home/createShareMinProCode", data, function(res) {
						that.minpro_qcode = res.data.share_code_img_path;
						that.createPoster();
					},
					false);

			},
			async createPoster() {

				let that = this;
				const ctx = uni.createCanvasContext('shareImageCanvas')

				ctx.drawImage('../../static/shareImage.png', 0, 0, 1080, 1842);


				/* 头像 */
				let userImage = await this.getImageInfo(this.current_user_headimg);

				let avatarurl_width = 86, //绘制的头像宽度
					avatarurl_heigth = 86, //绘制的头像高度
					avatarurl_x = 43, //绘制的头像在画布上的位置
					avatarurl_y = 43; //绘制的头像在画布上的位置
				ctx.save(); // 先保存状态 已便于画完圆再用
				ctx.beginPath(); //开始绘制
				ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0,
					Math.PI * 2, false); // 画圆
				ctx.clip(); // 剪切
				ctx.drawImage(userImage, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

				/* 用户名 */
				ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
				ctx.setFontSize(36);
				ctx.setFillStyle('#666666') // 文字颜色
				ctx.fillText(this.current_user_nick_name, 160, 106)

				/* 商品图片 */
				let goodsImage = await this.getImageInfo(this.goods_detail.goods_main_img);
				ctx.drawImage(goodsImage, 86, 302, 908, 908);

				/* 商品名称 */
				let goodsText = that.goods_detail.goods_title;
				if (goodsText.length > 20) {
					goodsText = goodsText.substr(0, 20) + '...'
				}

				ctx.setFillStyle('#f0ebe8')
				ctx.fillRect(86, 1112, 908, 98)
				ctx.setFontSize(36);
				ctx.setFillStyle('#333')
				ctx.fillText(goodsText, 116, 1176)

				/* 商品价格 */
				ctx.setFontSize(54);
				ctx.setFillStyle('#f12d0a')
				ctx.fillText('￥' + that.goods_detail.sales_price, 88, 1298)

				/* 返利 */
				ctx.setFontSize(28);
				ctx.setFillStyle('#999')
				ctx.fillText('拼团返利：￥' + that.goods_detail.max_income, 320, 1298)
				/* 二维码 */
				let QRode = await this.getImageInfo(that.minpro_qcode);
				ctx.drawImage(QRode, 134, 1402, 306, 306);

				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'shareImageCanvas',
						x: 0,
						y: 0,
						width: 1080,
						height: 1842,
						destWidth: 1080,
						destHeight: 1842,
						success: (res) => {
							that.shareBanner = res.tempFilePath
							uni.hideLoading();
							that.shareImageShow = true;
						}
					})
				})
			},
			async shareImageEvent() {
				let that = this;
				this.shareShow = false


				if (!this.shareBanner) {
					uni.showLoading({
						title: '加载中'
					});

					that.getMinproShareImg();


				} else {
					this.shareImageShow = true
				}
			},
			downloadImage() {
				const src = this.shareBanner;

				// #ifdef  H5
				let oA = document.createElement("a");
				oA.download = ''; // 设置下载的文件名，默认是'下载'
				oA.href = src;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
				// #endif

				// #ifndef  H5
				uni.saveImageToPhotosAlbum({ //保存图片
					filePath: src,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
						});
					}
				})
				// #endif
			}
		},
		computed: {
			numFilter() {
				return (value) => {
					// 截取当前数据到小数点后两位
					let realVal = parseFloat(value).toFixed(2)
					return realVal
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.goodsDetails {
	min-height: 100%;
	background-color: var(--bgColor);
	padding-bottom: 100rpx;
	::v-deep .u-swiper-indicator {
		bottom: 80rpx !important;
	}
}
.swiperBox {
	position: relative;
	.swiper-video {
		width: 100%;
		height: 750rpx;
		display: block;
		position: relative;
		background: #f4f4f4;
		#carouseVideo {
			width: 100%;
			height: inherit;
		}
	}
	.typeBtn {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
		.item {
			background-color: #ffffff;
			border-radius: 40rpx;
			margin: 0 10rpx;
			font-size: 28rpx;
			padding: 4rpx 30rpx;
			text-align: center;
			.iconfont {
				font-size: 28rpx;
				margin-right: 4rpx;
			}
			&.active {
				background-color: #ff8a00;
				color: #ffffff;
			}
		}
	}
}
.commodityInfo {
	background: #FFFFFF;
	position: relative;
	.topBox {
		position: absolute;
		top: -56rpx;
		left: 20rpx;
		right: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		.info {
			color: #FFFFFF;
			background-color: var(--primaryColor);
			padding: 20rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.price {
				display: inline-block;
				vertical-align: bottom;
				font-size: 28rpx;
				font-weight: 600;
				text {
					font-size: 52rpx;
				}
			}
			.num {
				font-size: 26rpx;
			}
			.stock {
				margin-left: 12rpx;
				margin-bottom: 12rpx;
			}
			.label {
				color: #fff;
				font-size: 24rpx;
				padding: 4rpx 12rpx;
				border-radius: 40rpx;
				background: rgba($color: #fff, $alpha: 0.5);
				margin-left: 12rpx;
				margin-bottom: 12rpx;
			}
			.group {
				color: #fff;
				font-size: 24rpx;
				padding: 4rpx 12rpx;
				border-radius: 40rpx;
				background: rgba($color: #fff, $alpha: 0.5);
			}
		}
	}
}

.commodityInfo .topBox .info .priceBox .original {
	display: inline-block;
	vertical-align: bottom;
	font-size: 24rpx;
	text-decoration: line-through;
	margin-left: 20rpx;
	color: #FFFFFF;
}

.commodityInfo .topBox .info .subsidy {
	display: inline-block;
	vertical-align: bottom;
	font-size: 24rpx;
	margin-left: 26rpx;
	color: #fffc5c;
}

.commodityInfo .topBox .info .subsidy .label {
	text-align: center;
	display: inline-block;
}

.commodityInfo .topBox .info .subsidy text {
	color: #FFFFFF;
}

.commodityInfo .topBox .info .subsidy .text {
	font-size: 30rpx;
}

.commodityInfo .topBox .spell {
	background-color: #fa716f;
	padding: 12rpx 24rpx;
	font-size: 24rpx;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.commodityInfo .topBox .spell text {
	color: #fffc5c;
	margin: 0 4rpx;
}

.commodityInfo .bottoBox {
	padding: 80rpx 20rpx 20rpx;
}

.commodityInfo .bottoBox .title {
	font-size: 32rpx;
}

.rule {
	background-color: #FFFFFF;
}

.rule .titleBox {
	font-weight: 600;
	padding: 20rpx 0;
	/* border-bottom: 1rpx solid #EEEEEE; */
}

.rule .titleBox .title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	position: relative;
	padding: 0 80rpx;
}

.rule .title::before {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	left: 0;
	top: 18rpx;
}

.rule .title::after {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	right: 0;
	top: 18rpx;
}

.rule .circuit {
	width: 750rpx;
}

.barBox {
	padding: 20rpx 0;
	background-color: #FFFFFF;
	.item {
		text-align: center;
		.custom-icon {
			font-size: 36rpx;
			vertical-align: middle;
		}
		.text {
			margin-left: 8rpx;
			vertical-align: middle;
		}
	}
}

.warnBox {
	background-color: #FFFFFF;
	padding: 20rpx 0;
	text-align: center;
	line-height: 46rpx;
	color: #f37b1d;
	font-size: 30rpx;
	font-weight: bold;
}

.group {
	background-color: #FFFFFF;
}

.group .titleBox {
	font-weight: 600;
	padding: 20rpx 0;
	/* border-bottom: 1rpx solid #EEEEEE; */
}

.group .titleBox .title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	position: relative;
	padding: 0 80rpx;
}

.group .title::before {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	left: 0;
	top: 18rpx;
}

.group .title::after {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	right: 0;
	top: 18rpx;
}

.group .groupList {
	padding: 0 20rpx 20rpx;
	text-align: center;
}

.group .groupList .avatar {
	margin: 10rpx 14rpx;
	display: inline-block;
	vertical-align: top;
}

.group .groupList .noGroup {
	display: inline-block;
	vertical-align: top;
	width: 64rpx;
	height: 64rpx;
	border-radius: 56rpx;
	background-color: #EEEEEE;
	margin: 10rpx 14rpx;
	line-height: 64rpx;
	text-align: center;
}

.group .text {
	text-align: center;
	font-size: 24rpx;
	color: #666666;
	margin-top: 12rpx;
}

.introduction {
	background-color: #FFFFFF;
}

.introduction .item {
	font-size: 28rpx;
	padding: 24rpx 20rpx;
	border-bottom: 1rpx solid #EEEEEE;
}

.introduction .item .title {
	margin-right: 16rpx;
	width: 120rpx;
	color: #333333;
	text-align: right;
}

.introduction .item .content {
	color: #666666;
	font-size: 26rpx;
	flex: 1;
}

.introduction .item .rightIcon {
	margin-left: 10rpx;
}

.introduction .item .rightIcon .iconfont {
	color: #666666;
}

.details {
	background-color: #FFFFFF;
}

.details .titleBox {
	font-weight: 600;
	padding: 20rpx 0;
	/* border-bottom: 1rpx solid #EEEEEE; */
}

.details .titleBox .title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	position: relative;
	padding: 0 80rpx;
}

.details .title::before {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	left: 0;
	top: 18rpx;
}

.details .title::after {
	content: '';
	display: block;
	width: 60rpx;
	height: 1rpx;
	background-color: #DDDDDD;
	position: absolute;
	right: 0;
	top: 18rpx;
}

.shareFixed {
	position: fixed;
	right: 32rpx;
	bottom: 132rpx;
	width: 100rpx;
	height: 100rpx;
	text-align: center;
	border-radius: 50%;
	background-color: #FFFFFF;
	box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.4);
}

.bottomBox {
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.09);
	position: fixed;
	bottom: 0;
	left: 0;
	padding-right: 24rpx;
	.operate {
		height: 100%;
		.item {
			text-align: center;
			padding: 0 20rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.text {
				font-size: 24rpx;
				color: #666666;
				margin-top: 4rpx;
			}
			&.server {
				background-color: transparent;
				line-height: 32rpx;
				&::after {
					border: none;
					border-radius: 0;
				}
			}
		}
	}
	.btnBox {
		.btn {
			width: 180rpx;
			height: 80rpx;
			margin: 0;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: 600;
			outline: none;
			&:first-of-type {
				border-radius: 40rpx 0 0 40rpx;
				color: #FFFFFF;
				background-color: var(--warningColor);
			}
			&:last-of-type {
				width: 260rpx;
				font-size: 30rpx;
				background: var(--redColor);
				border-radius: 0 40rpx 40rpx 0;
			}
			&::after {
				border: none;
			}
		}
	}
}
.bottomBox .btnBox .btn2 {
	width: 460rpx;
	height: 80rpx;
	margin: 0;
	line-height: 80rpx;
	font-size: 28rpx;
	font-weight: 600;
	background: var(--btnBgColor);
	border-radius: 40rpx;
	&::after {
		border: none;
	}
}

.popupBox {
	padding: 60rpx 20rpx 20rpx;
}

.popupBox .topBox .comImg {
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
}

.popupBox .topBox .info {
	flex: 1;
	box-sizing: border-box;
	padding-left: 20rpx;
	padding-right: 60rpx;
}

.popupBox .topBox .info .title {
	font-size: 28rpx;
	font-weight: 600;
}

.popupBox .topBox .info .price {
	margin-top: 20rpx;
	font-size: 40rpx;
}

.popupBox .format {
	padding: 20rpx 0 0 0;
	border-bottom: 1rpx solid #eeeeee;
}

.popupBox .format .title {
	font-size: 28rpx;
	margin-bottom: 20rpx;
}

.popupBox .format .itemList {
	display: flex;
	flex-wrap: wrap;
}

.popupBox .format .itemList .item {
	font-size: 26rpx;
	color: #999999;
	border: 1rpx solid #999999;
	border-radius: 10rpx;
	padding: 4rpx 16rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}

.popupBox .format .itemList .item.itemActive {
	color: var(--primaryColor);
	border: 1rpx solid var(--primaryColor);
}

.popupBox .buyBtn {
	border-radius: 60rpx;
	background: var(--btnBgColor);
	font-size: 32rpx;
}

.notice .noticeImg {
	width: 750rpx;
	vertical-align: middle;
}

.popum {
	position: fixed;
	left: 0;
	top: 50%;
	animation: 5s divAnimate linear 1 forwards;
	text-align: center;
	background-color: rgba(228, 231, 237, 0.8);
	height: 144rpx;
	width: 228rpx;
	padding: 20rpx 30rpx;
	border-radius: 10rpx
}

@keyframes divAnimate {
	0% {
		transform: translateX(-228rpx);
		-webkit-transform: translateX(-228rpx);
	}

	100% {
		transform: translateX(978rpx);
		-webkit-transform: translateX(978rpx);
	}
}

.popum image {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	margin-bottom: 6rpx;
}

.popum .uName {
	font-size: 24rpx;
}

.popum .uName .text {
	width: 90rpx;
}

.winningMask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s ease-in-out;
}

.winningMask.winningShow {
	opacity: 1;
	transform: scale(1);
}

.winning {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 680rpx;
	border-radius: 12rpx;
	padding: 140rpx 20rpx 80rpx;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.winningImage {
	width: 580rpx;
	height: 291rpx;
	vertical-align: middle;
	margin-top: -300rpx;
	animation: winImgAnimate 2s linear infinite forwards;
}

.winning .con {
	text-align: center;
}

.winning .con .label {
	font-size: 28rpx;
	color: #333333;
}

.winning .con .winningName {
	font-size: 34rpx;
	font-weight: 600;
	vertical-align: middle;
}

.winning .con .winningName .avatarBox {
	position: relative;
}

.winning .con .winningName .crown {
	position: absolute;
	top: -26rpx;
	right: -12rpx;
	z-index: 10;
	width: 72rpx;
	height: 59rpx;
}

.winning .con .winningName .avatar {
	width: 88rpx;
	height: 88rpx;
	border-radius: 88rpx;
	margin-bottom: 8rpx;
}

.winning .con .failureList {
	padding-top: 10rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.winning .con .failureList .item {
	color: #999999;
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	flex-direction: column;
}

.winning .con .failureList .item .avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 60rpx;
	margin-bottom: 6rpx;
}

.winning .con .failureList .item .uName {
	height: 32rpx;
	width: 100rpx;
	overflow: hidden;
}

.winning .con .failureList .remaining {
	margin: 4rpx 12rpx;
	border-radius: 56rpx;
	background-color: #EEEEEE;
	width: 60rpx;
	height: 60rpx;
	border-radius: 60rpx;
}

.winning .btn {
	background: var(--btnBgColor);
	border-radius: 60rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	width: 440rpx;
}

.winning .iconBox {
	position: absolute;
	bottom: -100rpx;
	left: 50%;
	transform: translateX(-50%);
}

.winning .iconBox .custom-icon {
	color: #FFFFFF;
	font-size: 64rpx;
}

@keyframes winImgAnimate {
	0% {
		transform: scale(0.92);
	}

	50% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.92);
	}
}

.avatarPopup {
	padding: 68rpx 32rpx 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.avatarPopup .uName {
	font-size: 32rpx;
	margin-top: 16rpx;
}

.shareBox .title {
	height: 88rpx;
	line-height: 88rpx;
	padding-left: 20rpx;
	font-size: 30rpx;
	background-color: #f7f7f7;
}

.shareBox .shareList {
	padding: 28rpx 0;
}

.shareBox .shareList .item {
	flex: 1;
	text-align: center;
	position: relative;
}

.shareBox .shareList button.item {
	padding: 0;
	background-color: transparent;
}

.shareBox .shareList button.item::after {
	border: none;
}

.shareBox .shareList .item .iconBox {
	width: 78rpx;
	height: 78rpx;
	border-radius: 50%;
	margin: 0 auto;
}

.shareBox .shareList .item:nth-of-type(1) .iconBox {
	background-color: #18ac18;
}

.shareBox .shareList .item:nth-of-type(2) .iconBox {
	background-color: #9ad024;
}

.shareBox .shareList .item:nth-of-type(3) .iconBox {
	background-color: #a35be5;
}

.shareBox .shareList .item .text {
	font-size: 26rpx;
	line-height: 34rpx;
	color: #666;
	margin-top: 10rpx;
}

.shareBox .shareImage {
	padding: 20rpx;
	text-align: center;
}

.shareBox .shareImage image {
	height: 700rpx;
}

.shareBox .shareImage button {
	margin-top: 20rpx;
	font-size: 28rpx;
	line-height: 76rpx;
	color: #FFFFFF;
	background: var(--btnBgColor);
}

.shareBox .shareImage .text {
	font-size: 24rpx;
	color: #666666;
	margin-top: 20rpx;
}

.pyqBox image {
	width: 100%;
}

#shareFriends {
	position: fixed;
	right: 10000px;
}

#shareImageCanvas {
	position: fixed;
	left: 10000px;
}
</style>
